<template>
  <div class="app-container">
    <el-steps :active="active" align-cente style="transform: scale(0.8)">
      <el-step
        v-for="(item, index) in stepList"
        :key="index"
        :icon="item.icon"
        :title="item.title"
        style="cursor: pointer;"
        @click.native="handleStep(index)"
      />
    </el-steps>
    <div style="margin-top: 20px">
      <JBQKEl v-if="active === 1" :zdgz-id="zdgzId" @goto-next="handleStep" />
      <CJYBQKEl
        v-if="active === 2 && zdgzId"
        :zdgz-id="zdgzId"
        @goto-next="handleStep"
      />
      <CJXDQKEl
        v-if="active === 3 && zdgzId"
        :zdgz-id="zdgzId"
        @goto-next="handleStep"
      />
      <FXGKEl
        v-if="active === 4 && zdgzId"
        :zdgz-id="zdgzId"
        @goto-next="handleStep"
      />
      <LXXDYEl
        v-if="active === 5 && zdgzId"
        :zdgz-id="zdgzId"
        @goto-next="handleStep"
      />
      <FJXXEl
        v-if="active === 6 && zdgzId"
        :zdgz-id="zdgzId"
        @goto-next="handleStep"
      />
    </div>
  </div>
</template>

<script>
import JBQKEl from "../component/jbqk.vue";
import CJYBQKEl from "../component/cjybqk.vue";
import CJXDQKEl from "../component/cjxdqk.vue";
import LXXDYEl from "../component/lxxdy.vue";
import FXGKEl from "../component/fxgk.vue";
import FJXXEl from "../component/fjxx.vue";
export default {
  components: {
    JBQKEl,
    CJYBQKEl,
    CJXDQKEl,
    FXGKEl,
    FJXXEl,
    LXXDYEl,
  },
  data() {
    return {
      zdgzId: "",
      active: 1,
      stepList: [
        { title: "基本情况", key: "", icon: "el-icon-tickets" },
        { title: "采集一般情况", key: "", icon: "el-icon-folder" },
        { title: "采集吸毒情况", key: "", icon: "el-icon-folder-add" },
        { title: "风险管控", key: "", icon: "el-icon-cpu" },
        { title: "类型相对应情况", key: "", icon: "el-icon-edit-outline" },
        { title: "附加信息", key: "", icon: "el-icon-edit" },
      ],
    };
  },
  mounted() {
    this.zdgzId = this.$route.query.zdgzId;
    this.active = Number(this.$route.query.active) || 1;
  },
  methods: {
    handleStep(index, zdgzId) {
      if (!this.$route.query.zdgzId) {
        this.$router.replace({
          path: "/user/zdgz-detail/index",
          query: { zdgzId: zdgzId, active: index + 1 },
        });

        if (zdgzId) {
          this.zdgzId = zdgzId;
        }
      } else {
        this.active = index + 1;
        this.$router.replace({
          path: "/user/zdgz-detail/index",
          query: { zdgzId: this.$route.query.zdgzId, active: index + 1 },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.stepSuc :hover {
  cursor: pointer;
}

.stepErr :hover {
  cursor: not-allowed;
}
</style>
